<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
      *{padding: 0; margin:0;}
      .banner{
          width:1600px; height:376px;
          background: #e6e6e6;
      }
      .banner-main{
          width:1000px; height:376px;
          margin:0 auto;
          background: pink;
          position:relative;
          /* 添加相对定位主要是为了给绝对定位找参考物 */
      }
      .banner-main img{
          width:1000px;
      }
      .banner p{
          background:#000;
          line-height:30px;
          color:#fff;
          position: absolute;
          right:26px;
          bottom:20px;
          padding:0 12px;
      }
      .banner-main span{
          width:30px; height:50px; background:#000;
          color:#fff;
          position: absolute;
          top:162px;   
          text-align: center;
          line-height: 50px;
          display: none;
      }
      .banner .leftArr{
          left:0;
      }
      .banner .rightArr{
          right:0;
      }
      .banner-main:hover span{
          display: block;
      }
  </style>
</head>
<body>
    <div class="banner">
        <div class="banner-main">
            <a href="#"><img src="images/banner.jpg" alt=""></a>
            <p>守护最好的坤坤</p>
            <span class="leftArr"><</span>
            <span class="rightArr">></span>
        </div>
    </div>
</body>
</html>